import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import { List, Icon, TextareaItem } from 'antd-mobile';
import { ToastTips } from '../../../../../../../common/toastTips/tosat';
import styles from './uploadImg.css';
import imageCompress from '../../../../../../../framework/utils/imageCompress';
import CustBtn from '../../../../../../../common/buttons/Btn';

const add = require('../../../../../../../icons/add-x128.png');
const deleteIcon = require('../../../../../../../icons/delete.png');
const uploadImg = ({
  uploadImgData,
  defaultPhoneNumber='',
  dispatch,
  onSubmit=()=>{},
  form: { getFieldProps, getFieldsValue, validateFields },
}) => {

  // console.log("uploadImgData", JSON.stringify(uploadImgData));

  const imgNegative = () =>{
    console.log('imgNegative click');
    if(uploadImgData.length == 3 ){
      ToastTips('最多上传3张图片', 2000, null);
      return;
    }
    document.getElementById("upload").click();
  }
  ''
  const uploadPic = (event) => {
    let files = event.target.files;
    if (files && files.length > 0) {
      imageCompress.convertInputImgae(files, 800, (base64Url,imgURL) => {
        if(uploadImgData && uploadImgData.length > 0){
          uploadImgData.map((item, index) => {
            if(item.base64Url != base64Url){
              dispatch({
                type:'myFeedback/onUpload',
                payload:{
                  base64Url:base64Url,
                  imgURL:imgURL
                }
              })
            }
          })
        }else{
          dispatch({
            type:'myFeedback/onUpload',
            payload:{
              base64Url:base64Url,
              imgURL:imgURL
            }
          })
        }

      });
    }
    var file = document.getElementById('upload');
    file.value = ''; //虽然file的value不能设为有字符的值，但是可以设置为空值
    //或者
    // file.outerHTML = file.outerHTML; //重新初始化了file的html
  }
  const btnProps = {
    textValue:'提交',
    onOk(){
      validData();
    },
  }

  const validData = () => {
    validateFields((error, value) => {
      // console.log(error, value);
      if (error) {
        for (var i in error) {
          error[i].errors.map(e => ToastTips(e.message, 2000, null))
        }
        return;
      } else if( value.feedback.length == 0 ){
        ToastTips('请输入联系方式', 2000, null)
      } else if ((/^1[34578]\d{9}$/.test(value.connectWay)) || (/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value.connectWay))) {
        // console.log('value', JSON.stringify(value))
        onSubmit(value)
      } else {
        ToastTips('请输入正确的联系方式', 2000, null)
      }
    });
  }

  const onRemove = (imgId) => {
    dispatch({type: 'myFeedback/onRemovePics', payload: {imgId}})
  }


  return (
    <div className={styles.container}>

      <div  className={styles.TextareaItem} >
        <TextareaItem
          cols={25}
          rows={8}
          placeholder="请输入您的意见"
          style={{paddingRight:'0.3rem'}}
          {...getFieldProps('feedback',{
            rules: [
              { required: true, message: '请输入您的意见' }
            ]
          })}
        />

        <div>
          <div>
            <input
            id='upload'
            type='file'
            onChange={(e) => uploadPic(e)}
            style={{display:'none'}} />
          </div>

          <div className={styles.imgview}>
            <div className={styles.uploadImg}>
            {
              uploadImgData.map((item, index) => {
                return (
                  <div key={index.toString()} className={styles.imgItem}>
                    <span className={styles.deleteIcon} onClick={() => onRemove(item.id)}>
                      <img src={deleteIcon}/>
                    </span>
                    <img src={item.imgURL} />
                  </div>
                )
              })
            }
            </div>
            <div className={styles.addImg}>
                <img src={add} onClick={() => imgNegative()}/>
            </div>

          </div>
          <p className={styles.hint}>上传照片，最多上传3张(选填) </p>
        </div>
      </div>
      <div className={styles.connectWay}>
          <span>联系方式 :</span>
          <input type="text"
              {...getFieldProps('connectWay',{
                initialValue:defaultPhoneNumber,
                rules: [
                  { required: true, message: '请输入手机号码或邮箱' }
                ]
              })}
              placeholder="请输入手机号码或邮箱"
              className={styles.inputStyle}
            />
      </div>
      <div className={styles.btn}>
        <CustBtn {...btnProps}/>
      </div>


    </div>
  )
}


uploadImg.propTypes = {
};

export default createForm()(uploadImg);
